<template>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="公有话术" name="first">
            <div>
                <panle title='快捷回复' content="快捷回复列表"></panle>

<!--                <el-form :inline="true" ref="formInline" :model="formInline" label-width="80px" class="demo-form-inline">-->
<!--                    <el-form-item label="话术分组" prop="name">-->
<!--                        <el-input size="mini" placeholder="请输入名称" v-model="formInline.name"></el-input>-->

<!--                    </el-form-item>-->
<!--                    <el-form-item >-->
<!--                        <el-button type="primary" @click="search" size="mini">搜索</el-button>-->
<!--                        <el-button @click="resetFormes('formInline')" size="mini">重置</el-button>-->
<!--                    </el-form-item>-->
<!--                    -->
<!--                </el-form>-->
                <div class="searchbar">
                    <el-row class="pt20">
                        <el-col :span="12">
                          
                            <el-button size="mini" @click="init()">刷新</el-button>
                            <pers-button icon="el-icon-edit" size="mini" @click="addCommon()" perms="sys:role:add" type="primary" label="添加"></pers-button>
<!--                            <pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="sys:role:batch_del" label="批量删除"></pers-button>-->
                        </el-col>
                       
                    </el-row>
                </div>

                <el-table :data="tableDataCommon" style="width: 100%;margin-bottom: 20px;" row-key="ids" border stripe 
                          v-loading="loading" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="ids" label="ID" width="45"></el-table-column>
                    <el-table-column prop="name" label="话术分组"> </el-table-column>
                    <el-table-column prop="content" label="话术内容"></el-table-column>
<!--                    <el-table-column prop="nick_name" label="使用员工"></el-table-column>-->
                    <el-table-column prop="create_time" label="创建时间"></el-table-column>

                    <el-table-column prop="id" label="操作" >
                        <template slot-scope="scope">
                            <PersButton type="primary" size="mini" label="编辑" icon="el-icon-edit" circle perms="sys:common:editCommon" @click="editCommon(scope.row)"></PersButton>
                            <PersButton type="danger" size="mini" icon="el-icon-delete" circle perms="sys:common:del" label="删除" @click="delCommon(scope.row)"></PersButton>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="block">

                    <el-pagination @size-change="handleSizeChangeCommon" @current-change="handleCurrentChangeCommon" :current-page="pageNumber"
                                   :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
                                   :total="total">
                    </el-pagination>
                </div>
                <el-dialog :visible.sync="openCommon" width="950px" append-to-body :title="!form.id ? '新增话术' : '修改话术'">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="话术分组" prop="name">
                            <el-select v-model="form.name"  placeholder="请选择" >
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-row>

                            <el-col :span="24">
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="话术内容"  prop="content">
                                    <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 15, maxRows: 4}"
                                        placeholder="请输入内容"
                                        v-model="form.content">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="图片" prop="im_url">
                                    <div class="uploadcol">
                                        <div class="uploadborder">
                                            <img v-if="form.im_url" :src="form.im_url" width="100" height="100" />
                                            <img v-else src="../../../../assets/img/uploadimg.jpg" width="80" height="80" />
                                        </div>
                                        <el-button type="primary" @click="openUploadImage()" size="mini"
                                                   style="margin-top:10px">上传图片</el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="视频" prop="video_url">
                                    <div class="uploadcol">
                                        <div class="uploadborder-video">
                                            <el-tag v-if="form.video_url" :lable="form.video_url" type="danger"  effect="plain"
                                                    style="margin: auto;"
                                            >MP4</el-tag>
                                        </div>
                                        <el-button type="primary" @click="openUploadVideo()" size="mini"
                                                   style="margin-top:10px">上传视频</el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="文件" prop="file_url">
                                    <div class="uploadcol">
                                        <div class="uploadborder-file">
                                            <el-tag v-if="form.file_url" :lable="form.file_url" type="warning"  effect="plain"
                                            >File</el-tag>
                                        </div>
                                        <el-button type="primary" @click="openUploadFiles()" size="mini"
                                                   style="margin-top:10px">上传文件</el-button>
                                    </div>
                                </el-form-item>
                            </el-col>

<!--                            <el-col :span="24" v-if="checkList.length > 0">-->
<!--                                <el-form-item label="使用员工" >-->
<!--                                    <el-checkbox-group v-model="form.selectedList">-->
<!--                                        <el-checkbox v-for="(item) in checkList" :key="item" :label="item"></el-checkbox>-->

<!--                                    </el-checkbox-group>-->
<!--                                </el-form-item>-->
<!--                            </el-col>-->
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="openCommon = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="!form.id ? submitFormCommon('form') : subEditFormCommon('form') " size="small">确 定</el-button>
                    </div>

                </el-dialog>

            </div>
            <!--图片--->
            <el-dialog :visible.sync="openImage" width="900px" append-to-body :title=" '添加图片'">
                <el-form ref="resForm" :model="resForm"  label-width="80px">
                    <el-table :data="tableDataImage" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                              v-loading="loading" @selection-change="handleSelectionChangeImage">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="id" label="ID" width="55"></el-table-column>
                        <el-table-column prop="name" label="名称"> </el-table-column>
                        <el-table-column prop="src" label="素材图片">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.src" fit="fill" style="width: 60px;height: 60px;"></el-image>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="block">

                        <el-pagination @size-change="handleSizeChangeImage" @current-change="handleCurrentChangeImage" :current-page="pageNumber_image"
                                       :page-sizes="[10, 50, 100, 200]" :page-size="pageSize_image" background layout="total, sizes, prev, pager, next, jumper"
                                       :total="total_image">
                        </el-pagination>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="openImage = false" size="small">取 消</el-button>
                    <el-button type="primary" @click=" submitImageForm('resForm')  " size="small">确 定</el-button>
                </div>
            </el-dialog>
            <!--视频--->
            <el-dialog :visible.sync="openVideo" width="900px" append-to-body :title=" '添加视频'">
                <el-form ref="resForm" :model="resFormVideo"  label-width="80px">
                    <el-table :data="tableDataVideo" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                              v-loading="loading" @selection-change="handleSelectionChangeVideo">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="id" label="ID" width="55"></el-table-column>
                        <el-table-column prop="name" label="名称"> </el-table-column>
                        <el-table-column prop="media_id" label="素材ID"> </el-table-column>
                    </el-table>

                    <div class="block">

                        <el-pagination @size-change="handleSizeChangeVideo" @current-change="handleCurrentChangeVideo" :current-page="pageNumber_video"
                                       :page-sizes="[10, 50, 100, 200]" :page-size="pageSize_video" background layout="total, sizes, prev, pager, next, jumper"
                                       :total="total_video">
                        </el-pagination>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="openVideo = false" size="small">取 消</el-button>
                    <el-button type="primary" @click=" submitVideoForm('resFormVideo')  " size="small">确 定</el-button>
                </div>
            </el-dialog>
            <!--上传文件-->
            <el-dialog :visible.sync="openFiles" width="900px" append-to-body :title=" '添加文件'">
                <el-form ref="resForm" :model="resFormFiles"  label-width="80px">
                    <el-table :data="tableDataFiles" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                              v-loading="loading" @selection-change="handleSelectionChangeFiles">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="id" label="ID" width="55"></el-table-column>
                        <el-table-column prop="name" label="名称"> </el-table-column>
                        <el-table-column prop="media_id" label="素材ID"> </el-table-column>

                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChangeFiles" @current-change="handleCurrentChangeFiles" :current-page="pageNumber_files"
                                       :page-sizes="[10, 50, 100, 200]" :page-size="pageSize_files" background layout="total, sizes, prev, pager, next, jumper"
                                       :total="total_files">
                        </el-pagination>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="openFiles = false" size="small">取 消</el-button>
                    <el-button type="primary" @click=" submitFilesForm('resFormFiles')  " size="small">确 定</el-button>
                </div>
            </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="私有话术" name="second">

            <div>
                <panle title='快捷回复' content="快捷回复列表"></panle>
                <el-form :inline="true" ref="pform" :model="pform" label-width="80px" class="demo-form-inline">
<!--                    <el-form-item label="话术分组" prop="name">-->
<!--                        <el-select v-model="form.value"  placeholder="请选择" >-->
<!--                            <el-option-->
<!--                                v-for="item in options"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="审核状态" prop="status">
                        <el-select size="mini" v-model="pform.status" placeholder="请选择">
                            <el-option v-for="item in orderstate" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchList" size="mini">搜索</el-button>
                        <el-button @click="resetForm('pform')" size="mini">重置</el-button>
                    </el-form-item>
                
                </el-form>

                <div class="searchbar">
                    <el-row class="pt20">
                        <el-col :span="12">
                            <el-button size="mini" @click="init()">刷新</el-button>
<!--                            <pers-button icon="el-icon-edit" size="mini" @click="add()" perms="sys:role:add" type="primary" label="添加"></pers-button>-->
<!--                            <pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="sys:role:batch_del" label="批量删除"></pers-button>-->
                        </el-col>
                      
                    </el-row>
                </div>

                <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="ids" border stripe 
                          v-loading="loading" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="70">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="110%"></el-table-column>
                    <el-table-column prop="name" label="话术分组" width="300%"> </el-table-column>
                    <el-table-column prop="content" label="内容" width="540%"></el-table-column>
                    <el-table-column prop="username" label="使用员工" width="120%"></el-table-column>
                    <el-table-column prop="status" label="审核状态" width="120%"></el-table-column>
                    <el-table-column prop="reject" label="驳回备注" width="350%"></el-table-column>
                    <el-table-column prop="create_time" label="创建时间" width="220%"></el-table-column>

                    <el-table-column prop="id" label="操作" width="500%">
                        <template slot-scope="scope">
                            <PersButton type="success" size="mini" label="审核" icon="el-icon-check" circle perms="sys:audit:audit" @click="resAuditCommon(scope.row)"></PersButton>
                            <PersButton type="warning" size="mini" label="驳回" icon="el-icon-star-off" circle perms="sys:role:edit" @click="rejectShortCommon(scope.row)"></PersButton>

<!--                            <PersButton type="primary" size="mini" label="编辑" icon="el-icon-edit" circle perms="sys:role:edit" @click="editShortCommon(scope.row)"></PersButton>-->
<!--                            <PersButton type="danger" size="mini" icon="el-icon-delete" perms="sys:role:del" circle label="删除" @click="delShortCommon(scope.row)"></PersButton>-->
                        </template>
                    </el-table-column>
                </el-table>

                <div class="block">

                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumbers"
                                   :page-sizes="[10, 50, 100, 200]" :page-size="pageSizes" background layout="total, sizes, prev, pager, next, jumper"
                                   :total="totals">
                    </el-pagination>
                </div>
                <el-dialog :visible.sync="open" width="900px" append-to-body :title="!resForm.id ? '新增快捷回复' : '修改快捷回复'">
                    <el-form ref="resForm" :model="resForm" :rules="ruleser" label-width="80px">
                        <el-row>

                            <el-col :span="24">
                                <el-form-item label="话术分组" prop="name">
                                    <el-input v-model="resForm.name" placeholder="请输入名称" size="small" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="话术内容"  prop="content">
                                    <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 15, maxRows: 4}"
                                        placeholder="请输入内容"
                                        v-model="resForm.content">
                                    </el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="open = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="!resForm.id ? submitForm('resForm') : subEditForm('resForm') " size="small">确 定</el-button>
                    </div>
                </el-dialog>
            </div>

        </el-tab-pane> 
    
    </el-tabs>
</template>

<script>
import {VueEditor} from "vue2-editor";

import Panle from '@/components/Panle.vue';
import PersButton from '@/components/PersButton.vue';
import { hasPermission,isShow } from '@/common/permission';
import {
    addCommon, addOwnedCommon, auditCommon,
    delCommon, delShortCommon,
    editCommon, editOwnedCommon, getCommon,
    getCourse, getGroupList,
    getShortcutEndList, getShortcutEndListPrivate,
    getStaffUser, rejectCommon
} from "@/api/scrm/staff/shortcutend";
import SelectImg from "@/components/select-img.vue";
import {getStaffData} from "@/api/scrm/lapsed/lapsed";
import {getFiles, getImage, getStaffList, getVideo} from "@/api/scrm/staff/greeting";
export default {
    name: "shortcutend",
    components: {
        SelectImg,
        Panle,
        PersButton,
        VueEditor
    },
    data() {
        return {
            loading: false,
            loadingImage: false,
            loadingVideo: false,
            loadingFiles: false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            pageSize_image: 10, //一页显示多少条
            pageNumber_image: 1,
            total_image:0,
            pageSize_video: 10, //一页显示多少条
            pageNumber_video: 1,
            total_video:0,
            pageSize_files: 10, //一页显示多少条
            pageNumber_files: 1,
            total_files:0,
            
            pageSizes: 10, //一页显示多少条
            pageNumbers: 1,
            totals: 0, //总页数
            tableData: [],
            tableDataImage: [],
            tableDataVideo: [],
            tableDataFiles: [],
            openImage:false,
            openVideo:false,
            openFiles:false,
            resFormVideo:{},
            resFormFiles:{},
            tableDataCommon:[],
            serachword: '',
            formInline: {
                name: "",
                pageSize: 10,
                pageNumber: 1,
                total: 0,
            },
            open: false,
            openCommon:false,
            form: {
                name: "",
                content: "",
                pageSize: 10,
                pageNumber: 1,
                total: 0,
            },
            resForm: {
                name: "",
                content: "",
                status:'',
                pageSize: 10,
                pageNumber: 1,
                total: 0,
              
            },
            pform:{
                name: "",
                status:'',
                pageSizes: 10,
                pageNumbers: 1,
                total: 0,
            },
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value1: '',
            rules: {
                content: [{
                    required: true,
                    message: "内容不能为空",
                    trigger: "blur"
                }],
                name: [{
                    required: true,
                    message: "请选择分组",
                    trigger: "blur"
                }],
            },
            ruleser: {
                name: [{
                    required: true,
                    message: "话术名称不能为空",
                    trigger: "blur"
                }],

            },
            parentDate: [],
            checkKey: [],
            multipleSelection: [],
            checkedAll: false,
            checked: true,
            checkList: [],
            activeName: 'first',
            imgnum:1,
            imgnumvideo:1,
            imgnumfile:1,
            IsShowPicDig:false,
            IsShowPicDigVideo:false,
            IsShowPicDigFile:false,
            multipleSelectionImage: [],
            multipleSelectionVideo: [],
            multipleSelectionFiles: [],
            selectedList:[],
            type:0,
            orderstate: [{
                value: '1',
                label: '已驳回'
            }, {
                value: '2',
                label: '正常'
            }, {
                value: '3',
                label: '申请中'
            }],
            value: ''
        }
    },
    created() {
        this.init();
    },
    methods: {
        hasPermission,
        isShow,
        handleClick(tab, event)
        {
            this.activeName = tab.name;
            console.log(tab, event);
            this.init()
        },
        init: function() {
            this.loading = true;
           
            //公有
            if(this.activeName == 'first'){
                let _param = {
                    name:this.formInline.name,
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber
                };
                getShortcutEndList(_param).then((res) => {
                    if (res.code == 200) {
                        this.tableDataCommon = res.data.list;
                        this.total = res.data.total;
                        this.loading = false;
                    }
                });
            }else{
                let _parames = {
                    name:this.pform.name,
                    status:this.pform.status,
                    pageSizes:this.pageSizes,
                    pageNumbers:this.pageNumbers
                };
                //私有
                getShortcutEndListPrivate(_parames).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.list;
                        this.totals = res.data.total;
                        this.loading = false;
                    }
                });
                // getGroupList(this.form).then((res) => {
                //     this.options = res.data;
                // })
            }
        },
        //私有
        searchList: function() {
            this.loading = true;
            this.pform.pageSizes = 10;
            this.pform.pageNumbers = 1;
            this.init();
        },
        //公有
        search: function() {
            this.loading = true;
            this.formInline.pageSize = 10;
            this.formInline.pageNumber = 1;
            this.init();
        },
        handleSizeChangeCommon: function(e) {
            this.pageSize = e;
            this.init();
        },
        handleSizeChangeImage: function(e) {
            console.log(e);
            this.pageSize_image = e;
            this.init();
        },
        handleSizeChangeVideo: function(e) {
            console.log(e);
            this.pageSize_video = e;
            this.init();
        },
        handleSizeChangeFiles: function(e) {
            console.log(e);
            this.pageSize_files = e;
            this.init();
        },
        handleCurrentChangeImage: function(e) {
            console.log(e);
            this.pageNumber_image = e;
            this.init();
        },
        handleCurrentChangeVideo: function(e) {
            console.log(e);
            this.pageNumber_video = e;
            this.init();
        },
        handleCurrentChangeFiles: function(e) {
            console.log(e);
            this.pageNumber_files = e;
            this.init();
        },
        handleCurrentChangeCommon: function(e) {
            this.pageNumber = e;
            this.init();
        },
        handleSizeChange: function(e) {
            this.pageSizes = e;
            this.init();
        },
        handleCurrentChange: function(e) {
            this.pageNumbers = e;
            this.init();
        },
     
        handleSelectionChangeImage: function(val) {
            this.multipleSelectionImage = val;
        },
        handleSelectionChangeVideo: function(val) {
            this.multipleSelectionVideo = val;

        },
        handleSelectionChangeFiles: function(val) {
            this.multipleSelectionFiles = val;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.form.status = ''
            this.form.name = ''
            this.init();
        },
        resetFormes(formName) {
            this.$refs[formName].resetFields();
            this.formInline.status = ''
            this.formInline.name = ''
            this.init();
        },
        openUploadDial: function (type) {
            this.type = type;
            if(type==0){
                this.IsShowPicDig = true;
            }else if(type==2){
                this.IsShowPicDigVideo = true;
            }else if (type==1){
                this.IsShowPicDigFile = true;
            }
        },
        selectImgs: function (res) {
            this.IsShowPicDig = true;
            this.form.im_url = res[0].urls
            this.form.content +="<img src='"+this.form.im_url+"'/>"
        },
        lotteryImgs: function (res) {
            
            this.IsShowPicDigVideo = true;
            this.form.video_url = res[0].urls
            this.form.content += "<a :href='url'>"+decodeURI(this.form.video_url)+" </a>"
        },
        lottfile: function (res) {

            this.IsShowPicDigFile = true;
            this.form.file_url = res[0].urls
            this.form.content  += "<a :href='url'>"+decodeURI(this.form.file_url)+" </a>"
        },
        
        handleSelectionChange: function(e) {
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.role_id)
            }
            this.multipleSelection = selectChang;
        },
        //上传图片
        openUploadImage: async function (){
            let param = {
                "pageSize": this.pageSize_image,
                "pageNumber": this.pageNumber_image,
            }
            const res = await getImage(param);
            this.tableDataImage  = res.data.list;
            this.openImage = true;
            this.total_image = res.data.total;
            this.loadingImage = false;

        },
        //上传视频
        openUploadVideo: async function (){
            let param = {
                "pageSize": this.pageSize_video,
                "pageNumber": this.pageNumber_video,
            }
            const res = await getVideo(param);
            this.tableDataVideo  = res.data.list;
            this.openVideo = true;
            this.total_video = res.data.total;
            this.loadingVideo = false;

        },
        //上传文件
        openUploadFiles: async function (){
            let param = {
                "pageSize": this.pageSize_files,
                "pageNumber": this.pageNumber_files,
            }
            const res = await getFiles(param);
            this.tableDataFiles  = res.data.list;
            this.openFiles = true;
            this.total_files = res.data.total;
            this.loadingFiles = false;

        },
        addCommon: async function() {
           
            const res = await getGroupList();
            this.options = res.data;
            // const des = await getStaffList();
            // this.checkList = des.data;
            this.form = {
                "value": "",
                "content": "",
                "im_url": "",
                "video_url": "",
                "file_url": "",
                "selectedList": []
            };
            this.checkKey = [];
            this.openCommon = true;
        },
        add: function() {
            this.resForm = {
                "value": "",
                "content": "",
                "selectedList": []
            };
            this.checkKey = [];
            this.open = true;
        },
        submitImageForm:function(data){

            if(this.multipleSelectionImage.length>1){
                this.msgError('只能选择一张图片');
                return ;
            }
            if(this.multipleSelectionImage.length==0){
                this.msgError('未选择任何图片');
                return;
            }
            let im_url = this.multipleSelectionImage[0].src;
            this.form.im_url = im_url;
            this.openImage = false;
        },
        submitVideoForm:function(data){

            if(this.multipleSelectionVideo.length>1){
                this.msgError('只能选择一个视频');
                return ;
            }
            if(this.multipleSelectionVideo.length==0){
                this.msgError('未选择任何视频');
                return;
            }
            let video_url = this.multipleSelectionVideo[0].media_id;
            this.form.video_url = video_url;
            this.openVideo = false;
        },
        submitFilesForm:function(data){

            if(this.multipleSelectionFiles.length>1){
                this.msgError('只能选择一个文件');
                return ;
            }
            if(this.multipleSelectionFiles.length==0){
                this.msgError('未选择任何文件');
                return;
            }
            let file_url = this.multipleSelectionFiles[0].media_id;
            this.form.file_url = file_url;
            this.openFiles = false;
        },
        //公有话术新增
        submitFormCommon:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    addCommon(this.form).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.init();
                            this.openCommon=false;
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        //私有话术新增
        submitForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    addOwnedCommon(this.resForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open=false;
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        //公有话术删除
        delCommon:function(data) {
            this.$confirm('确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
              
                delCommon(data).then((res)=>{
                    if(res.code==200){
                        this.msgSuccess(res.msg);
                        this.init();
                    }else{
                        this.msgError(res.msg);
                    }
                })
                
            }).catch(() =>{
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //公有话术编辑
        editCommon: async function(data){
            const res = await getGroupList();
            this.options = res.data;
            // const des = await getStaffList();
            // this.checkList = des.data;
            // const selectedList = data.nick_name.split(',')
            const name = data.id;
            let editForm ={
                "id":data.id,
                "ids":data.ids,
               // "name":data.name,
                "content":data.content,
                "im_url":data.im_url,
                "video_url":data.video_url,
                "file_url":data.file_url,
                // selectedList,
                 name,
            }
            this.form = {...editForm};
            this.openCommon=true;
        },
        subEditFormCommon:function(data){

            this.$refs[data].validate((valid) => {
                if (valid) {
                    editCommon(this.form).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.init();
                            this.openCommon=false;

                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })

        },
        //私有有话术编辑
        editShortCommon:function(data){

            let editForm ={
                "id":data.id,
                "ids":data.ids,
                "name":data.name,
                "content":data.content,
            }
            this.resForm = {...editForm};
            this.open=true;
        },
        subEditForm:function(data){

            this.$refs[data].validate((valid) => {
                if (valid) {
                    editOwnedCommon(this.resForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open=false;

                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })

        },
        //私有话术删除
        delShortCommon:function(data) {
            this.$confirm('确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                delShortCommon(data).then((res)=>{
                    if(res.code==200){
                        this.msgSuccess(res.msg);
                        this.init();
                    }else{
                        this.msgError(res.msg);
                    }
                })
            }).catch(() =>{
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //审核
        resAuditCommon:function(data) {
            this.$confirm('确定审核吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                auditCommon(data).then((res)=>{
                    if(res.code==200){
                        this.msgSuccess(res.msg);
                        this.init();
                    }else{
                        this.msgError(res.msg);
                    }
                })
            }).catch(() =>{
                this.$message({
                    type: 'info',
                    message: '已取消审核'
                });
            });
        },
        rejectShortCommon:function(data) {
            this.$prompt('请输入信息', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /[\u4e00-\u9fff]/,
                inputErrorMessage: '请输入中文'
            }).then(({ value }) => {
                
                rejectCommon({id:data.ids,val:value}).then((res)=>{
                    if(res.code==200){
                        this.msgSuccess(res.msg);
                        this.init();
                    }else{
                        this.msgError(res.msg);
                    }
                })
            }).catch(() =>{
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/common";

.demo-form-inline .el-form-item {
    margin-bottom: 0;
}
.upload_video{
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-tree {
    max-height: 200px;
    overflow: auto;
    background: #f7f7f7;
}
.uploadborder-video{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 100px;
  height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uploadborder-file{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-tree-node__label, .el-textarea__inner {
    font-size: 12px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
    float: left;
    width: 100px;
}

.el-checkbox__label {
    font-size: 12px !important;
}
</style>
